<style lang="scss">
  @import "../utils/base.scss";

  .css1 {
    text-align: center;

    height: 500px;
  }

  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
      top: 0;
    }
  }

  .button_1 {
    height: auto;
    font-size: 13px;
    word-wrap: break-word !important;
    word-break: break-all !important;
    white-space: normal !important;
  }

  .col_info {
    text-align: right;
    padding-right: 20px;
    padding-bottom: 4px;
    padding-top: 4px;
  }

  .tablecol_info {
    // text-align: right;
    text-align: left;
    padding-right: 20px;
    padding-bottom: 4px;
    padding-top: 4px;
  }

  .my_tag {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    margin: 1px 2px 1px 0;
    padding: 0 4px;
    border: 1px solid #DCDAE2;
    border-radius: 3px;
    // background: #19be6b;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    color: #333333 !important;
    font-size: 12px;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.8);
  }
</style>
<template>
  <div style="height:calc(100vh - 94px);background-color:#FFFFFF;overflow-y:auto;">
    <div class="qheader">
      <p>服务目录配置</p>
    </div>
    <div class="gcontent">
      <Form name="activityinfo" :label-width="140" label-position="left" class="form form_left input">
        <Row>
          <Col span="8">
          <FormItem label="配置服务项:">
            <Select v-model="checkType" @on-change="searchType">
              <Option value="resource">资源服务目录</Option>
              <Option value="sever">服务器目录</Option>
              <Option value="tool">工具目录</Option>
              <Option value="data">数据目录</Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row v-if="isData">
          <component v-model="showData" ref="dataBaseCatalog"  :is="'dataBaseCatalog'" :resultData='resultData'
            :ifProcess="false" style="width:96%"></component>
        </Row>
        <Row style="position: relative;" v-else>
          <Col span="23">
          <Table :columns="columns" :data="showList" border :span-method="handleSpan" :max-height="tableHeight">
            <template slot-scope="{ row, index }" slot="count">
              <p>{{index + 1}}</p>
            </template>
            <template slot-scope="{ row, index }" slot="belongSys">
              <span>{{row.belongSys.sysName}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="clazz">
              <span>{{row.clazz}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="serviceName">
              <span>{{row.serviceName}}</span>
              <Tooltip v-if="row.subName == null || row.subName == ''"
                :content="row.des === undefined || row.des === null || row.des === '' ? '暂无信息':row.des" max-width="200"
                placement="right" :transfer="true" style="white-space: normal;">
                <Icon type="md-help-circle" />
              </Tooltip>
            </template>
            <template slot-scope="{ row, index }" slot="subName">
              <span>{{row.subName}}</span>
              <Tooltip v-if="row.subName != null && row.subName != ''"
                :content="row.des === undefined || row.des === null || row.des === '' ? '暂无信息':row.des" max-width="200"
                placement="right" :transfer="true" style="white-space: normal;">
                <Icon type="md-help-circle" />
              </Tooltip>
            </template>

            <template slot-scope="{ row, index }" slot="resourcetype">
              <div class="my_tag">{{"ID："+ row.id}}</div>
              <div class="my_tag">{{"工具关联："+ (row.isUse == -1 ? '是':'否')}}</div>
              <div class="my_tag">可选项：
                <span v-if="row.resourcetype == 0">默认</span>
                <span v-if="row.resourcetype == 1">单选框</span>
                <span v-if="row.resourcetype == 3">文本输入</span>
                <span v-if="row.resourcetype == 4">复选框</span>
                <span v-if="row.resourcetype == 5">双副本</span>
                <span v-if="row.resourcetype == 6">三副本</span>
              </div>
              <template v-for="(item, index) in Object.keys(distinctDimList)">
                <div class="my_tag" v-if="distinctDimList[item] == row.distinctDim">区分项：{{item}}</div>
              </template>
              <template v-for="(item, index) in Object.keys(analyseDimList)">
                <div class="my_tag" v-if="analyseDimList[item] == row.analyseDim">维度：{{item}}</div>
              </template>
              <div class="my_tag">{{"所属系统："+ row.belongSys.sysName}}</div>
            </template>
            <template slot-scope="{ row, index }" slot="options">
              <!-- 默认 -->
              <Row v-if="row.resourcetype == 0">
                <Col span="12" class="tablecol_info">
                <span>*数量：</span>
                <InputNumber :min="0" style="width: 50%; " class="table_input" />
                </Col>
                <Col span="12" class="tablecol_info">
                <span>*单位：</span>
                <Select style="width: 60%;text-align: left; " :transfer="true">
                  <Option v-for="(item,index) in row.options" :key="index" :value="item">{{item}}</Option>
                </Select>
                </Col>
              </Row>
              <!-- 单选 -->
              <Row v-else-if="row.resourcetype == 1">
                <Col span="24" class="tablecol_info" style="text-align: center;">
                <RadioGroup>
                  <Radio v-for="(i, index) in row.options" :key="index" :label="i">{{i}}</Radio>
                </RadioGroup>
                </Col>
              </Row>
              <!-- 文本框 -->
              <Row v-else-if="row.resourcetype == 3">
                <template v-for="(item, key) in row.options">
                  <Col span="22" :key="key">
                  <span>*{{item}}：</span>
                  <Input :key="item" style="width: 60%;text-align: left; " class="table_input" />
                  </Col>
                </template>
              </Row>
              <!-- 多选 -->
              <Row v-else-if="row.resourcetype == 4">
                <Col span="24" style="text-align: center;">

                <CheckboxGroup>
                  <template v-for="(item,index) in row.options">
                    <Checkbox :label="item">{{item}}</Checkbox>
                  </template>
                </CheckboxGroup>
                </Col>
              </Row>
              <!-- 双副本 -->
              <Row v-if="row.resourcetype == 5">
                <Col span="12" class="tablecol_info">
                <span>*双副本数量：</span>
                <InputNumber v-model="row.val" :min="0" style="width: 50%; " class="table_input" />
                </Col>
                <Col span="11" class="tablecol_info">
                <span>*单位：</span>
                <Select style="width: 60%;text-align: left; " :transfer="true">
                  <Option v-for="(item,index) in row.options" :key="index" :value="item">{{item}}</Option>
                </Select>
                </Col>
                <Col span="12" class="tablecol_info">
                <span>*单副本数量：{{row.val == undefined ? 0:row.val/2}}</span>
                </Col>
              </Row>
              <!-- 三副本 -->
              <Row v-if="row.resourcetype == 6">
                <Col span="12" class="tablecol_info">
                <span>*三副本数量：</span>
                <InputNumber v-model="row.val" :min="0" style="width: 50%; " class="table_input" />
                </Col>
                <Col span="11" class="tablecol_info">
                <span>*单位：</span>
                <Select style="width: 60%;text-align: left; " :transfer="true">
                  <Option v-for="(item,index) in row.options" :key="index" :value="item">{{item}}</Option>
                </Select>
                </Col>
                <Col span="12" class="tablecol_info">
                <span>*单副本数量：{{row.val == undefined ? 0: parseFloat(row.val/3).toFixed(2)}}</span>
                </Col>
              </Row>
            </template>

            <template slot-scope="{ row, index }" slot="ncdes">
              <Tooltip max-width="200" placement="right" :transfer="true" style="white-space: normal;width: 100%;">
                <p style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;width: 100%;">
                  {{row.ncdes}}
                </p>
                <template slot="content" style="white-space: normal;">{{row.ncdes}}</template>
              </Tooltip>
            </template>
            <template slot-scope="{ row, index }" slot="cpuDes">
              <Tooltip max-width="200" placement="right" :transfer="true" style="white-space: normal;width: 100%;">
                <p style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;width: 100%;">
                  {{row.cpuDes}}
                </p>
                <template slot="content" style="white-space: normal;">{{row.cpuDes}}</template>
              </Tooltip>
            </template>
            <template slot-scope="{ row, index }" slot="data">
              <span>{{row.dataVolumn + row.dataUnit}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="sys">
              <span>{{row.sysVolumn + row.sysUnit}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="raid">
              <p>{{showRaid(row.raidOptions)}}</p>
              <!-- <Tooltip max-width="200" placement="right"  :transfer="true" style="white-space: normal;width: 100%;">
                                    <p style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;width: 100%;">
                                        {{showRaid(row.raidOptions)}}
                                    </p>
                                    <template slot="content" style="white-space: normal;">{{showRaid(row.raidOptions)}}</template>
                                </Tooltip> -->
            </template>
            <template slot-scope="{ row, index }" slot="needResources">
              <p>{{showtoolServiceList(row.needResources)}}</p>
            </template>
            <!-- <template slot-scope="{ row, index }" slot="needSevers">
                                <p>{{showtoolServiceList2(row.needSevers)}}</p>
                            </template> -->
            <template slot-scope="{ row, index }" slot="action">
              <Button type='primary' size="small" @click="editRow(row, index)">编辑</Button>
              <Button type='error' size="small" @click="deleteRow(row, index)">删除</Button>
            </template>
          </Table>
          </Col>
          <Spin size="large" fix v-if="loadingModal"></Spin>
        </Row>

        <!-- 资源服务目录 -->
        <div v-if="showResource">

          <Modal v-model="showResource" width="90%" @on-ok="save()" :loading="handleLoading" :mask-closable="false">
            <p slot="header" style="font-size:18px;font-weight:bold;">
              <span v-if="!isupdate">新增资源服务目录</span>
              <span v-else>修改资源服务目录</span>
            </p>
            <component v-if="showResource" :applyInfo="applyInfo" :checkType="'resource'" ref="resource" :allServiceList="allServiceList.resourceList"
               :is="'setModal'"></component>
          </Modal>
        </div>

        <!-- 工具目录 -->
        <Modal v-model="showTool" width="90%" @on-ok="save()" :loading="handleLoading" :mask-closable="false">
          <p slot="header" style="font-size:18px;font-weight:bold;">
            <span v-if="!isupdate">新增工具目录</span>
            <span v-else>修改工具目录</span>
          </p>
          <component v-if="showTool" v-model="packageLists" :applyInfo="applyInfo" :allServiceList="allServiceList"
            :checkType="'tool'" ref="tool"  :is="'setModal'"></component>
        </Modal>

        <!-- 服务器目录 -->
        <Modal v-model="showSever" width="700" @on-ok="save()" :loading="handleLoading" :mask-closable="false">
          <p slot="header" style="font-size:18px;font-weight:bold;">
            <span v-if="!isupdate">新增服务器目录</span>
            <span v-else>修改服务器目录</span>
          </p>
          <Form ref="sever" :rules="severValidate" :model="applyInfo" :label-width="120" label-position="left"
            class="form form_left">
            <Row>
              <Col span="10">
              <FormItem label="服务器名称:" prop="severName">
                <Input v-model="applyInfo.severName" type="text" />
              </FormItem>
              </Col>

            </Row>
            <Row>
              <Col span="10">
              <FormItem label="CPU数量:">
                <InputNumber style="width: 100%;" :min="1" v-model="applyInfo.cpuQuantity" />
              </FormItem>
              </Col>
              <Col span="10" style="left: 10%;">
              <FormItem label="CPU描述:" prop="cpuDes">
                <Input v-model="applyInfo.cpuDes" type="text" />
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <FormItem label="内存数量:">
                <InputNumber style="width: 100%;" :min="1" v-model="applyInfo.ramQuantity" />
              </FormItem>
              </Col>
              <Col span="10" style="left: 10%;">
              <FormItem label="内存描述:" prop="ramDes">
                <Input v-model="applyInfo.ramDes" type="text" />
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <FormItem label="网卡数量:">
                <!-- <Input v-model="applyInfo.ncQuantity" type="text" /> -->
                <InputNumber style="width: 100%;" :min="1" v-model="applyInfo.ncquantity" />
              </FormItem>
              </Col>
              <Col span="10" style="left: 10%;">
              <FormItem label="网卡描述:" prop="ncdes">
                <Input v-model="applyInfo.ncdes" type="text" />
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <FormItem label="数据盘大小:">
                <!-- <Input v-model="applyInfo.ncQuantity" type="text" /> -->
                <InputNumber style="width: 100%;" :min="1" v-model="applyInfo.dataVolumn" />
              </FormItem>
              </Col>
              <Col span="10" style="left: 10%;">
              <FormItem label="数据盘单位:" prop="ncdes">
                <Select v-model="applyInfo.dataUnit" :transfer="true">
                  <Option value="GB">GB</Option>
                  <Option value="TB">TB</Option>
                </Select>
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <FormItem label="系统盘大小:">
                <!-- <Input v-model="applyInfo.ncQuantity" type="text" /> -->
                <InputNumber style="width: 100%;" :min="1" v-model="applyInfo.sysVolumn" />
              </FormItem>
              </Col>
              <Col span="10" style="left: 10%;">
              <FormItem label="系统盘单位:" prop="ncdes">
                <Select v-model="applyInfo.sysUnit" :transfer="true">
                  <Option value="GB">GB</Option>
                  <Option value="TB">TB</Option>
                </Select>
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="22">
              <FormItem label="raid方式:" required>
                <CheckboxGroup v-model="raidList">
                  <Checkbox label="isRaid0">Raid0</Checkbox>
                  <Checkbox label="isRaid1">Raid1</Checkbox>
                  <Checkbox label="isRaid5">Raid5</Checkbox>
                  <Checkbox label="isRaid6">Raid6</Checkbox>
                  <Checkbox label="isRaid10">Raid10</Checkbox>
                </CheckboxGroup>
              </FormItem>
              </Col>

            </Row>

          </Form>
        </Modal>

        <!-- 删除 -->
        <Modal v-model="showDel" width="360" @on-ok="del()" :loading="handleLoading" :mask-closable="false"
          :closable="false">
          <div style="text-align:center;font-size:16px;">
            <p>{{"是否确定删除“" + delMessage + "”?"}}</p>
          </div>
        </Modal>
      </Form>
    </div>
  </div>
</template>

<script>
  import ajax from "../ajax_util"
  import dataBaseCatalog from './applyVue/settledin/dataBaseCatalog'
  import setModal from "./applyVue/res_tool/setModal.vue"

  export default {
    name: "serviceSet",
    components: {
      dataBaseCatalog,
      setModal
    },
    data() {
      return {
        isData: false,
        showData: false,
        resultData: [],
        loadingModal: false,
        optionsInput: "", //资源申请，新增的可选项
        tableHeight: 300,
        delMessage: "",
        showDel: false, //显示删除
        handleLoading: true,
        showSever: false, //显示服务器
        showResource: false, //显示资源服务目录
        showTool: false, //显示新增工具
        raidList: [], //选择的raid方式
        editId: "",
        checkType: "resource",
        isupdate: false,
        applyValidate: {
          clazz: [{
            required: true,
            type: 'string',
            message: '请填写资源类型',
            trigger: 'blur'
          }, ],
          serviceName: [{
            required: true,
            type: 'string',
            message: '请填写服务名称',
            trigger: 'blur'
          }, ],
          subName: [{
            required: true,
            type: 'string',
            message: '请填写细分项名',
            trigger: 'blur'
          }, ],
          unit1: [{
            required: true,
            type: 'string',
            message: '请填写可选单位1',
            trigger: 'blur'
          }, ],
          // amId: [{
          // 	required: true,
          // 	type: 'string',
          // 	message: '请选择归属系统',
          // 	trigger: 'blur'
          // }],

        },
        toolValidate: {
          clazz: [{
            required: true,
            type: 'string',
            message: '请填写工具类型',
            trigger: 'blur'
          }, ],
          toolName: [{
            required: true,
            type: 'string',
            message: '请填写工具名称',
            trigger: 'blur'
          }, ],
        },
        severValidate: {
          severName: [{
            required: true,
            type: 'string',
            message: '请填写服务器名称',
            trigger: 'blur'
          }, ],
          cpuQuantity: [{
            required: true,
            type: 'number',
            message: '请填写正确的cpu数量',
            trigger: 'change'
          }, ],
          cpuDes: [{
            required: true,
            type: 'string',
            message: '请填写CPU描述',
            trigger: 'blur'
          }, ],
          ramQuantity: [{
            required: true,
            type: 'number',
            message: '请填写正确的内存数量',
            trigger: 'change'
          }, ],
          ramDes: [{
            required: true,
            type: 'string',
            message: '请填写内存描述',
            trigger: 'blur'
          }, ],
          ncquantity: [{
            required: true,
            type: 'number',
            message: '请填写正确的网卡数量',
            trigger: 'change'
          }, ],
          ncdes: [{
            required: true,
            type: 'string',
            message: '请填写网卡描述',
            trigger: 'blur'
          }, ],

        },
        columns: [],
        resourceColumns: [{
            title: "序号",
            align: "center",
            width: 70,
            key: "count",
            slot: "count",
          },
          {
            title: "资源类型",
            align: "left",
            resizable: true,
            width: 180,
            key: "clazz",
            slot: "clazz",
          },
          {
            title: "服务名称",
            resizable: true,
            align: "left",
            width: 120,
            key: "serviceName",
            slot: "serviceName",
          },
          {
            title: "细分项名",
            resizable: true,
            align: "left",
            width: 120,
            key: "subName",
            slot: "subName",
          },
          {
            title: "基本属性",
            align: "left",
            resizable: true,
            minWidth: 200,
            key: "resourcetype",
            slot: "resourcetype"
          },
          {
            title: "可选项",
            align: "left",
            minWidth: 500,
            key: "options",
            slot: "options"
          },
          {
            title: "描述",
            resizable: true,
            align: "left",
            minWidth: 180,
            key: "des",
          },
          {
            slot: 'action',
            align: 'center',
            width: 160,
            fixed: 'right',
            renderHeader: (h, index) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      if (!this.ifedit) {
                        this.showModal()
                      }
                    }
                  }
                }, '新增')
              ])
            }
          },
        ],
        severColumns: [{
            title: "序号",
            align: "center",
            width: 50,
            key: "count",
            slot: "count",
          },
          {
            title: "服务名称",
            align: "left",
            resizable: true,
            width: 120,
            key: "severName",
          },
          {
            title: "内存数量",
            align: "left",
            resizable: true,
            width: 70,
            key: "ramQuantity",
          },
          {
            title: "内存描述",
            resizable: true,
            align: "left",
            width: 120,
            key: "ramDes",
          },
          {
            title: "网卡数量",
            align: "left",
            resizable: true,
            width: 100,
            key: "ncquantity",
          },
          {
            title: "网卡描述",
            align: "left",
            resizable: true,
            width: 120,
            key: "ncdes",
            slot: "ncdes"
          },
          {
            title: "CPU数量",
            align: "left",
            resizable: true,
            width: 100,
            key: "cpuQuantity",
          },
          {
            title: "CPU描述",
            align: "left",
            resizable: true,
            minWidth: 120,
            key: "cpuDes",
            slot: "cpuDes"
          },
          {
            title: "支持raid方式",
            align: "left",
            resizable: true,
            minWidth: 120,
            // key: "ramDes",
            slot: "raid"
          },
          {
            title: "数据盘",
            align: "left",
            resizable: true,
            width: 80,
            key: "data",
            slot: "data"
          },
          {
            title: "系统盘",
            align: "left",
            resizable: true,
            width: 80,
            // key: "ramDes",
            slot: "sys"
          },
          {
            slot: 'action',
            align: 'center',
            width: 160,
            fixed: 'right',
            renderHeader: (h, index) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      if (!this.ifedit) {
                        this.showModal()
                      }
                    }
                  }
                }, '新增')
              ])
            }
          },
        ],
        toolColumns: [{
            title: "序号",
            align: "center",
            width: 70,
            key: "count",
            slot: "count",
          },
          {
            title: "工具类型",
            align: "center",
            resizable: true,
            width: 180,
            key: "clazz",
          },
          {
            title: "工具名称",
            align: "center",
            resizable: true,
            width: 180,
            key: "toolName",
          },
          {
            title: "归属系统",
            align: "center",
            resizable: true,
            width: 180,
            slot: "belongSys"
          },
          {
            title: "可选相关资源",
            align: "center",
            resizable: true,
            width: 220,
            key: "needResources",
            slot: "needResources"
          },
          // {
          //     title: "可选服务器资源",
          //     align: "center",
          //     // width: 180,
          //     key: "needSevers",
          //     slot: "needSevers"
          // },
          {
            title: "描述",
            align: "center",
            // width: 180,
            key: "des",
          },
          {
            slot: 'action',
            align: 'center',
            width: 160,
            fixed: 'right',
            renderHeader: (h, index) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      if (!this.ifedit) {
                        this.showModal()
                      }
                    }
                  }
                }, '新增')
              ])
            }
          },
        ],
        toolServiceList_col: [{
            title: "名称",
            align: "center",
            width: 70,
            key: "name",
            slot: "name",
          },
          {
            title: "数量",
            align: "center",
            width: 70,
            key: "count",
            slot: "count",
          },
          {
            title: "单位",
            align: "center",
            width: 70,
            key: "unit",
            slot: "unit",
          }
        ],
        toolServiceList_count: [],
        toolServiceList_unit: [{
            value: 'GB',
            label: 'GB'
          },
          {
            value: 'TB',
            label: 'TB'
          }
        ],
        toolServiceList_select: [],
        toolList: [], //新增的可选工具
        allServiceList: [],
        serviceList: [], //工具资源所要关联的数据资源
        serviceList2: [], //工具资源所要关联的服务器资源
        toolServiceList: [], //可选工具关联资源的相关资源
        toolServiceList2: [], //可选工具关联资源的服务资源
        toolResourcetInfo: { //工具关联的资源
          toolServiceList: [],
          severs: []
        },
        packageLists: [], //套餐集合
        showList: [],
        test: [],
        applyInfo: {},
        resourceTypeList: [], // 资源配置类型
        toolResourceList: [],
        g_span_record_obj: {
          "resource": {}
        },
        g_hash_record: {},
        analyseDimList: [], //资源分析可选择
        distinctDimList: [], //分析维度
        allSysLists: []
      }
    },

    mounted: function() {
      this.tableHeight = window.innerHeight < 600 ? 400 : window.innerHeight - 260

      this.loadingModal = true
      this.getServiceList()
      this.getAnalyseDimList()
      this.gitDistinctDimList()
      this.getSys()
    },
    methods: {
      setSys(id) {
        console.log(id)
        this.applyInfo.belongSys = this.allSysLists.find(e => e.id == id)
      },
      //获取该资源名称得关联项目
      getSysName() {

      },
      // 获取系统
      getSys() {
        var url = this.CONFIG.progress_url + "/system-map/for/resource"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.allSysLists = data
          }
        })
      },
      handleSpan({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (column.slot === "clazz") {
          return {
            rowspan: row.mergeCol === 0 ? 0 : row.mergeCol,
            colspan: row.mergeCol === 0 ? 0 : 1
          };
        } else if (column.slot === "serviceName") {
          return {
            rowspan: row.mergeCol1 === 0 ? 0 : row.mergeCol1,
            colspan: row.mergeCol1 === 0 ? 0 : 1
          };
        } else if (column.slot === "subName") {
          return {
            rowspan: row.mergeCol2 === 0 ? 0 : row.mergeCol2,
            colspan: row.mergeCol2 === 0 ? 0 : 1
          };
        }
      },
      setSortData(data) {
        var t = JSON.stringify(data)
        var t2 = JSON.parse(t)
        var res = t2.sort((a, b) => {
          let i = a['clazz'].localeCompare(b['clazz'])
          if (i == 0) {
            let i2 = a['serviceName'].localeCompare(b['serviceName'])
            if (i2 == 0) {
              return a['subName'].localeCompare(b['subName'])
            } else {
              return i2
            }
          } else {
            return i
          }
        })
        if (res.length > 0) {
          let that = this;
          let arrId = [];
          let serviceNameArr = [];
          let subNameArr = [];
          res.forEach(i => {
            !arrId.includes(i.clazz) ? arrId.push(i.clazz) : arrId;
            !serviceNameArr.includes(i.serviceName) ? serviceNameArr.push(i.serviceName) : arrId;
            !subNameArr.includes(i.subName) ? subNameArr.push(i.subName) : arrId;
          });
          let arrObj = [];
          let serviceNameObj = [];
          let subNameObj = [];
          arrId.forEach(j => {
            arrObj.push({
              id: j,
              num: 0
            })
          })
          serviceNameArr.forEach(j => {
            serviceNameObj.push({
              id: j,
              num: 0
            })
          })
          subNameArr.forEach(j => {
            subNameObj.push({
              id: j,
              num: 0
            })
          })
          console.log("arrId----->", arrId, arrObj)
          res.forEach(k => {
            arrObj.forEach(l => {
              k.clazz === l.id ? l.num++ : l.num;
            })
            serviceNameObj.forEach(l => {
              k.serviceName === l.id ? l.num++ : l.num;
            })
            subNameObj.forEach(l => {
              k.subName === l.id ? l.num++ : l.num;
            })
          })
          res.forEach(m => {
            arrObj.forEach((n, index) => {
              if (m.clazz === n.id) {
                if (arrId.includes(m.clazz)) {
                  m.mergeCol = n.num;
                  arrId.splice(arrId.indexOf(m.clazz), 1);
                } else {
                  m.mergeCol = 0;
                }
              }
            })
            serviceNameObj.forEach((n, index) => {
              if (m.serviceName === n.id) {
                if (serviceNameArr.includes(m.serviceName)) {
                  m.mergeCol1 = n.num;
                  serviceNameArr.splice(serviceNameArr.indexOf(m.serviceName), 1);
                } else {
                  m.mergeCol1 = 0;
                }
              }
            })
            subNameObj.forEach((n, index) => {
              if (m.subName === n.id) {
                if (subNameArr.includes(m.subName)) {
                  m.mergeCol2 = n.num;
                  subNameArr.splice(subNameArr.indexOf(m.subName), 1);
                } else {
                  m.mergeCol2 = 0;
                }
              }
            })
          })
        }

        return res;
      },

      setQuotaValue(list, index) {
        console.log(index, list)
        var temp = []

        list.forEach(item => {
          var t = this.allServiceList.resourceList[index].options.find(e => e == item)
          if (t != undefined) {
            temp.push(item)
          }
        })
        this.allServiceList.resourceList[index].quotaValue = temp
      },
      setDom() {
        console.log("------------->")
        this.$forceUpdate();
      },
      addOptions() {

        if (this.optionsInput != "" && this.applyInfo.options.indexOf(this.optionsInput) == -1) {
          if (this.applyInfo.resourcetype == 3 && this.applyInfo.options.length > 0) {
            this.$Message.info("添加新标题失败，暂支持添加一个文本标题！")
          } else {
            this.applyInfo.options.push(this.optionsInput)
            this.optionsInput = ""
          }
        } else {
          this.$Message.info("该新增项已存在,或不能为空")
        }
      },
      // 删除可选项
      delOption(event, name) {
        console.log(name, event)
        var index = this.applyInfo.options.indexOf(name)
        this.applyInfo.options.splice(index, 1);
        this.$forceUpdate();
      },
      getServiceList() {
        var url = this.CONFIG.progress_url + "/service-list"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {

            that.allServiceList = data
            if (that.checkType === 'resource') {
              that.getToolResourceList()
            } else if (that.checkType === "tool") {
              that.showList = data.toolList
              that.columns = that.toolColumns
              that.loadingModal = false
            } else if (that.checkType === "sever") {
              that.showList = data.severList
              that.columns = that.severColumns
              that.loadingModal = false
            }
          }
        })
      },
      // 获取资源可选项
      getAnalyseDimList() {
        var url = this.CONFIG.progress_url + "/enum/dim-analysis"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.analyseDimList = data
          }
        })
      },
      // 获取分析维度集合
      gitDistinctDimList() {
        var url = this.CONFIG.progress_url + "/enum/dim-distinct"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.distinctDimList = data
          }
        })
      },
      // 获取包含工具资源
      getToolResourceList() {
        var url = this.CONFIG.progress_url + "/service-list/resource"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            data.forEach(item => {
              if (item.resourcetype == 0 || item.resourcetype == 5 || item.resourcetype == 6) {
                item.quotaValue = 0
              } else if (item.resourcetype == 1 || item.resourcetype == 3) {
                item.quotaValue = ""
              } else if (item.resourcetype == 4) {
                item.quotaValue = []
              }
            })

            if (that.checkType === 'resource') {
              that.allServiceList.resourceList = data
              // that.setSortData(that.allServiceList.resourceList)
              that.showList = that.setSortData(that.allServiceList.resourceList)
              that.columns = that.resourceColumns
            }
            that.loadingModal = false
          }
        })
      },
      searchType(type) {
        this.loadingModal = true
        this.checkType = type
        this.applyInfo = {}
        if (type === "resource") {
          this.showList = this.setSortData(this.allServiceList.resourceList)
          this.columns = this.resourceColumns
          this.isData = false
        } else if (type === "sever") {
          this.showList = this.allServiceList.severList
          this.columns = this.severColumns
          this.applyInfo.cpuQuantity = 1
          this.applyInfo.ramQuantity = 1
          this.applyInfo.ncquantity = 1
          this.isData = false

        } else if (type === "tool") {
          this.showList = this.allServiceList.toolList
          this.columns = this.toolColumns
          this.isData = false
        } else if (type === "data") {
          this.isData = true
          this.showData = true
        }
        this.$forceUpdate();
        this.loadingModal = false
        // console.log(this.allServiceList.severList)
      },
      //保存资源服务目录
      save() {
        var temp = this.checkType
        if (this.isupdate) {
          //this.$refs[temp].validate((valid) => {
          // var valid = true
          var valid = this.$refs[temp].validate();
          console.log("isupdate", valid);
          if (valid) {
            if (this.checkType === "sever") {
              if (this.raidList.length < 1) {
                this.handleLoading = false
                this.$nextTick(() => {
                  this.handleLoading = true
                })
                this.$Message.error('请选择raid方式');
                return
              } else { //处理raid方式
                this.applyInfo.isRaid0 = 0
                this.applyInfo.isRaid1 = 0
                this.applyInfo.isRaid5 = 0
                this.applyInfo.isRaid6 = 0
                this.applyInfo.isRaid10 = 0
                this.raidList.forEach(item => {
                  console.log('item', item)
                  this.applyInfo[item] = 1
                })
              }
              if (this.applyInfo.cpuQuantity == undefined) {
                this.applyInfo.cpuQuantity = 1
              }
              if (this.applyInfo.ramQuantity == undefined) {
                this.applyInfo.ramQuantity = 1
              }
              if (this.applyInfo.sysVolumn == undefined) {
                this.applyInfo.sysVolumn = 1
              }
              if (this.applyInfo.dataVolumn == undefined) {
                this.applyInfo.dataVolumn = 1
              }
              if (this.applyInfo.ncquantity == undefined) {
                this.applyInfo.ncquantity = 1
              }
            }

            var checkAccount = true;
            if (this.checkType === 'tool') {
              var needResourcesTemp = []
              var needSeversTemp = []
              this.packageLists.forEach(packages => {
                if (packages.defaultPackage) {
                  this.applyInfo.defaultResourcesModel = packages.packageName
                }
                packages.package.toolServiceList.forEach(resource => {
                  needResourcesTemp.push({
                    modelName: packages.packageName,
                    quotaUnit: resource.unit,
                    'quotaValue': resource.resourcetype == 4 ? JSON.stringify(resource.val) : resource.val,
                    'resourceId': resource.id,
                    displayTypes: resource.displayTypes
                  })
                })
                packages.package.severs.forEach(sever => {
                  this.$set(sever, "modelName", packages.packageName)
                  needSeversTemp.push(sever)
                })
              })

              this.applyInfo.needResources = needResourcesTemp
              this.applyInfo.needSevers = needSeversTemp
              // if (this.$refs.tool.checkData()) {
              //   var account = this.$refs.tool.getAccount();
              //   this.applyInfo.account = account;
              // } else {
              //   checkAccount = false
              // }

            }
            if (this.checkType === "resource") {
              if (!this.applyInfo.supportSysIds) {
                this.applyInfo.supportSysIds = []
              }
              if (!this.applyInfo.supportSys) {
                this.applyInfo.supportSys = []
              }
              // if (this.$refs.resource.checkData()) {
              //   var account = this.$refs.resource.getAccount();
              //   this.applyInfo.account = account;
              // } else {
              //   checkAccount = false
              // }
            }
            this.applyInfo.id = this.editId
            console.log('修改', this.applyInfo)

            if (checkAccount) {
              var url = this.CONFIG.progress_url + "/service-list/" + this.checkType
              console.log("-----修改工具-----", JSON.stringify(this.applyInfo))

              var that = this;
              this.utils.delay(() => {
                ajax.put({
                  url: url,
                  that: that,
                  data: that.applyInfo,
                  success: function(data) {
                    that.handleLoading = false
                    that.$Message.success('修改成功!');
                    that.packageLists = [{
                      package: { //工具关联的资源
                        toolServiceList: [],
                        severs: []
                      },
                      packageName: "",
                      defaultPackage: false,
                    }]
                    setTimeout(() => {
                      if (that.checkType === "resource") {
                        that.showResource = false
                      } else if (that.checkType === "tool") {
                        that.showTool = false
                      } else if (that.checkType === "sever") {
                        that.raidList = []
                        that.showSever = false
                      }
                      that.$nextTick(() => {
                        that.handleLoading = true
                      })
                      that.getServiceList()
                    }, 1000)
                  }
                })
              }, 1000)
            } else {
              this.handleLoading = false
              this.$nextTick(() => {
                this.handleLoading = true
              })
            }

          } else {
            this.handleLoading = false
            this.$nextTick(() => {
              this.handleLoading = true
            })
            this.$Message.error('请填写必填项');
          }
          //})


        } else {
          // this.$refs[temp].validate((valid) => {
          var valid = this.$refs[temp].validate();
          console.log("baocun", valid);
          if (valid) {
            if (this.checkType === "sever") {
              if (this.raidList.length < 1) {
                this.handleLoading = false
                this.$nextTick(() => {
                  this.handleLoading = true
                })
                this.$Message.error('请选择raid方式');
                return
              } else { //处理raid方式
                this.applyInfo.isRaid0 = 0
                this.applyInfo.isRaid1 = 0
                this.applyInfo.isRaid5 = 0
                this.applyInfo.isRaid6 = 0
                this.applyInfo.isRaid10 = 0
                this.raidList.forEach(item => {
                  console.log('item', item)
                  this.applyInfo[item] = 1
                })
              }
              if (this.applyInfo.cpuQuantity == undefined) {
                this.applyInfo.cpuQuantity = 1
              }
              if (this.applyInfo.ramQuantity == undefined) {
                this.applyInfo.ramQuantity = 1
              }
              if (this.applyInfo.sysVolumn == undefined) {
                this.applyInfo.sysVolumn = 1
              }
              if (this.applyInfo.dataVolumn == undefined) {
                this.applyInfo.dataVolumn = 1
              }
              if (this.applyInfo.ncquantity == undefined) {
                this.applyInfo.ncquantity = 1
              }
            }

            var checkAccount = true;
            if (this.checkType === 'tool') {
              var needResourcesTemp = []
              var needSeversTemp = []
              this.packageLists.forEach(packages => {
                if (packages.defaultPackage) {
                  this.applyInfo.defaultResourcesModel = packages.packageName
                }
                packages.package.toolServiceList.forEach(resource => {
                  needResourcesTemp.push({
                    modelName: packages.packageName,
                    quotaUnit: resource.unit,
                    'quotaValue': resource.resourcetype == 4 ? JSON.stringify(resource.val) : resource.val,
                    'resourceId': resource.id
                  })
                })
                packages.package.severs.forEach(sever => {
                  this.$set(sever, "modelName", packages.packageName)
                  needSeversTemp.push(sever)
                })
              })

              this.applyInfo.needResources = needResourcesTemp
              this.applyInfo.needSevers = needSeversTemp

              // if (this.$refs.tool.checkData()) {
              //   var account = this.$refs.tool.getAccount();
              //   this.applyInfo.account = account;
              // } else {
              //   checkAccount = false
              // }
            }
            // if (this.checkType === "resource") {
            //   if (this.$refs.resource.checkData()) {
            //     var account = this.$refs.resource.getAccount();
            //     this.applyInfo.account = account;
            //   } else {
            //     checkAccount = false
            //   }
            // }

            if (checkAccount) {
              var url = this.CONFIG.progress_url + "/service-list/" + this.checkType
              console.log("-----新增工具-----", JSON.stringify(this.applyInfo))
              var that = this;
              this.utils.delay(() => {
                ajax.post({
                  url: url,
                  that: that,
                  data: that.applyInfo,
                  success: function(data) {
                    that.handleLoading = false
                    that.$Message.success('添加成功!');
                    that.packageLists = [{
                      package: { //工具关联的资源
                        toolServiceList: [],
                        severs: []
                      },
                      packageName: "",
                      defaultPackage: false,
                    }]
                    setTimeout(() => {
                      if (that.checkType === "resource") {
                        that.showResource = false
                      } else if (that.checkType === "tool") {
                        that.showTool = false
                      } else if (that.checkType === "sever") {
                        that.raidList = []
                        that.showSever = false
                      }
                      that.$nextTick(() => {
                        that.handleLoading = true
                      })
                      that.getServiceList()
                    }, 1000)
                  }
                })
              }, 1000)
            } else {
              this.handleLoading = false
              this.$nextTick(() => {
                this.handleLoading = true
              })
            }

          } else {
            this.handleLoading = false
            this.$nextTick(() => {
              this.handleLoading = true
            })
            this.$Message.error('请填写必填项');
          }
          // })
        }

      },
      //显示新增的页面
      showModal() {
        this.isupdate = false
        this.applyInfo = {}
        this.toolResourcetInfo.toolServiceList = []
        this.toolResourcetInfo.severs = []
        if (this.checkType === "resource") {
          this.applyInfo.isUse = 0
          this.applyInfo.resourcetype = 0
          this.applyInfo.belongSysId = ""
          this.applyInfo.options = []
          this.showResource = true
          // this.getResourceType()
        } else if (this.checkType === "tool") {
          this.packageLists = []
          this.getToolResourceList()
          // this.getAllService()
          this.showTool = true
        } else if (this.checkType === "sever") {
          this.showSever = true
        }
        console.log(this.applyInfo.isUse)
      },
      // 获取资源配置维度
      getResourceType() {
        var url = this.CONFIG.progress_url + "/service-list/resource/type"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.resourceTypeList = data
            that.showResource = true
          }
        })

      },
      editRow(row1, index) {
        console.log('editRow', row1)
        var temp1 = JSON.stringify(row1)
        var row = JSON.parse(temp1)
        this.editId = row.id
        this.isupdate = true
        if (this.checkType === "resource") {
          this.applyInfo = row
          this.applyInfo.belongSysId = row.belongSys.id
          this.$set(this.applyInfo, 'belongSysId', row.belongSys.id)
          this.showResource = true
        } else if (this.checkType === "tool") {
          var temp = []
          // this.getAllService()
          this.showTool = true
          this.applyInfo.id = row.id
          this.applyInfo.clazz = row.clazz
          this.applyInfo.toolName = row.toolName
          this.applyInfo.spServiceType = row.spServiceType
          this.$set(this.applyInfo, 'belongSysId', row.belongSys.id)
          console.log('editRow2', this.applyInfo, row.belongSys.id)
          this.applyInfo.des = row.des
          this.applyInfo.supportSysIds = row.supportSysIds
          this.applyInfo.supportSys = row.supportSys
          this.applyInfo.templateAccountId = row.templateAccountId

          this.handlePackageInfo(row)
        } else if (this.checkType === "sever") {
          this.showSever = true
          this.applyInfo.severName = row.severName
          this.applyInfo.cpuQuantity = row.cpuQuantity
          this.applyInfo.cpuDes = row.cpuDes
          this.applyInfo.ramQuantity = row.ramQuantity
          this.applyInfo.ramDes = row.ramDes
          this.applyInfo.ncquantity = row.ncquantity
          this.applyInfo.ncdes = row.ncdes
          this.applyInfo.dataVolumn = row.dataVolumn
          this.applyInfo.dataUnit = row.dataUnit
          this.applyInfo.sysVolumn = row.sysVolumn
          this.applyInfo.sysUnit = row.sysUnit
          this.raidList = []
          row.raidOptions.forEach(item => {
            this.raidList.push('isR' + item.slice(1, ))
            console.log('item', 'isR' + item.slice(1, ))
            this.applyInfo['isR' + item.slice(1, )] = 1
          })
        }
        console.log('editRow', this.applyInfo)
        this.$forceUpdate()
      },
      /**
       * 处理工具套餐
       * @param {Object} row
       */
      handlePackageInfo(row) {
        // 对资源套餐分组
        this.packageLists = []
        if (row.needResources) {
          row.needResources.forEach(item => {
            item.check = true
            if (item.resourcetype == 4 && (typeof item.quotaValue == 'string')) {
              item.quotaValue = JSON.parse(item.quotaValue)
            } else if (item.resourcetype == 0 || item.resourcetype == 5 || item.resourcetype == 6) {
              item.quotaValue = parseInt(item.quotaValue)
            } else {
              item.quotaValue = item.quotaValue
            }
            item.val = item.quotaValue
            item.quotaUnit = item.quotaUnit
            item.unit = item.quotaUnit

            var t1 = this.packageLists.find(e => e.packageName == item.modelName)
            if (t1) {
              if (row.defaultResourcesModel == item.modelName) {
                t1.defaultPackage = true
              }
              t1.package.toolServiceList.push(item)
            } else {
              this.packageLists.push({
                package: { //工具关联的资源
                  toolServiceList: [item],
                  severs: []
                },
                packageName: item.modelName,
                defaultPackage: row.defaultResourcesModel == item.modelName ? true : false,
              })
            }
          })
        }
        if (row.needSevers) {
          row.needSevers.forEach(item => {
            var t1 = this.packageLists.find(e => e.packageName == item.modelName)
            if (t1) {
              if (row.defaultResourcesModel == item.modelName) {
                t1.defaultPackage = true
              }
              t1.package.severs.push(item)
            } else {
              this.packageLists.push({
                package: { //工具关联的资源
                  toolServiceList: [],
                  severs: [item]
                },
                packageName: item.modelName,
                defaultPackage: row.defaultResourcesModel == item.modelName ? true : false,
              })
            }
          })
        }
      },

      deleteRow(row) {
        // console.log("row -- > ",row)
        this.showDel = true
        this.delId = row.id
        if (this.checkType === "resource") {
          this.delMessage = row.serviceName
        } else if (this.checkType === "tool") {
          this.delMessage = row.toolName
        } else if (this.checkType === "sever") {
          this.delMessage = row.severName
        }
      },
      del() {
        var url = this.CONFIG.progress_url + "/service-list/" + this.checkType + "/" + this.delId
        var that = this;
        console.log(this.delId);
        ajax.del({
          url: url,
          that: that,
          data: null,
          success: function(data) {
            that.$Message.success('删除成功!');
            that.handleLoading = false
            setTimeout(() => {
              that.$nextTick(() => {
                that.showDel = false
                that.handleLoading = true
              })
              that.getServiceList()
            }, 1000)
          }
        })
      },
      //获取所有相关资源
      getAllService() {
        var temp = this.allServiceList
        var serviceList = []
        var serviceList2 = []
        temp.resourceList.forEach(item => {
          serviceList.push({
            id: item.id,
            name: item.clazz + "_" + item.serviceName + (item.subName === '' ? '' : ('_' + item.subName))
          })
        })
        temp.severList.forEach(item => {
          serviceList2.push({
            id: item.id,
            name: item.severName
          })
        })
        this.serviceList = serviceList
        this.serviceList2 = serviceList2
      },
      //处理raid显示
      showRaid(raid) {
        var temp = ""
        raid.forEach(item => {
          temp += "、" + item
        });
        console.log(temp)
        return temp.substring(1, temp.length);
      },
      //处理可选相关资源
      showtoolServiceList(needResources) {
        var temp = ""
        if (needResources != undefined && needResources.length > 0) {
          needResources.forEach(item => {
            temp += "、" + item.clazz + "/" + item.serviceName + (item.subName === '' ? '' : ('/' + item.subName))
          });
          temp = temp.substring(1, temp.length);
        }
        // console.log(needResources)
        return temp
      },
      //处理可选服务器资源
      showtoolServiceList2(needSevers) {
        var temp = ""
        if (needSevers != undefined && needSevers.length > 0) {
          needSevers.forEach(item => {
            temp += "、" + item.severName
          });
          temp = temp.substring(1, temp.length);
        }

        return temp;
      }
    }

  }
</script>
